import React from 'react';

import { Input, Tooltip, Icon, Button, message } from 'antd';
import './index.scss';

class OneView extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            img_url: "https://pic4.40017.cn/scenery/destination/2016/07/12/10/oJTgWM_242x150_00.jpg.webp",
            input_img_url: ''
        };
    }

    componentWillMount() {
        this.setState({
            // img_url: '',
            input_mode: false,
        })
    }

    entryInputUrlMode = () => {

        this.setState({
            input_img_url: this.state.img_url,
            input_mode: true
        });
    }

    leaveInputUrlMode = () => {
        this.setState({
            input_mode: false
        });
    }

    confirmInputUrl = () => {
        this.setState({
            input_img_url: '',
            img_url: this.state.input_img_url,
            input_mode: false
        })
    }

    inputOnChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    clearImgUrl = () => {
        this.setState({
            img_url: ''
        })
    }



    render() {
        var empty_wrap = this.state.img_url.length == 0;
        return (
            <div className="ImageEditor">
                {empty_wrap && <div className="empty_wrap">
                    暂无图片,可拖拽或点击添加
                </div>}
                {!empty_wrap && <img src={this.state.img_url} />}
                <div className="tools_mask">

                </div>
                <div className="tools">
                    <div onClick={this.entryInputUrlMode}>指定</div>
                    <div onClick={this.clearImgUrl}>清除</div>
                </div>

                {
                    this.state.input_mode && <div className="input_img_url_wrap">
                        <textarea placeholder="请输入图片地址" name="input_img_url" onChange={this.inputOnChange} value={this.state.input_img_url} />
                        <div className="btns">
                            <Button type="primary" onClick={this.confirmInputUrl}>确定</Button>
                            <Button type="default" onClick={this.leaveInputUrlMode}>取消</Button>
                        </div>

                    </div>
                }


            </div>
        );
    }
}
export default OneView;